<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户列表</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-button type="primary" round @click="findCompany">公司查询</el-button>
    <div rel="value">
        <span>选择地区：</span>
        <template>
            <el-select v-model="value.pro"  placeholder="请选择" @change="selectCity">
                <el-option
                        v-for="(pro,index) in provinces"
                        :key="index"
                        :label="pro"
                        :value="pro">
                </el-option>
            </el-select>

            <el-select v-model="value.city" style="margin-left: 20px;" placeholder="请选择市" @change="selectRegion">
                <el-option
                        v-for="(city,index) in typeCitys"
                        :key="index"
                        :label="city"
                        :value="city">
                </el-option>
            </el-select>

            <el-select v-model="value.region" style="margin-left: 20px;" placeholder="请选择市">
                <el-option
                        v-for="(region,index) in typeRegions"
                        :key="index"
                        :label="region"
                        :value="region">
                </el-option>
            </el-select>
        </template>
        <span>企业名称</span>
        <el-input v-model="value.name" placeholder="请输入内容" style="width: 180px"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
    </div>

    <template>
        <el-table style="width: 100%"
                  :data="customers"
                  ref="customerTable">
            <el-table-column label="id" width="80">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="客户名称" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="地址" width="250">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.address }}</span>
                </template>
            </el-table-column>

            <el-table-column label="公司法人" width="80">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.company.legal }}</span>
                </template>
            </el-table-column>

            <el-table-column label="公司联系电话" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.telephone }}</span>
                </template>
            </el-table-column>
            <el-table-column label="邮箱" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px;">{{ scope.row.email }}</span>
                </template>
            </el-table-column>
            <el-table-column label="主营业务" width="80">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.business }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="80">
                <template slot-scope="scope">
                    <div v-if="scope.row.company.companyStatus == '已认证'" style="background-color:green;width: 60px;height: 22px"><span style="margin-left: 10px;color: black">{{ scope.row.company.companyStatus }}</span></div>
                    <div v-else style="background-color: red;width: 60px;height: 22px"><span style="margin-left: 10px;color: black">{{ scope.row.company.companyStatus }}</span></div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" icon="el-icon-edit" disabled @click="">管理</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 10px;">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="page_size"
                           :page-size="4"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="count"
                           :background="back">
            </el-pagination>
        </div>
        <el-button style="margin-top: 10px;" icon="el-icon-plus" size="mini" @click="dialogFormVisible = true">添加客户</el-button>

        <el-dialog title="客户操作" :visible.sync="dialogFormVisible" width="500px" @close="closeDialog()">
            <el-form :model="company">
                <el-form-item label="企业名称" prop="companyName">
                    <el-input type="text" v-model="company.companyName" placeholder="请输入企业名称"></el-input>
                </el-form-item>
                <el-form-item label="企业法人" prop="legal">
                    <el-input type="text" v-model="company.legal" placeholder="请输入企业法人"></el-input>
                </el-form-item>
                <el-form-item label="企业类型" prop="companyType">
                    <el-input type="text" v-model="company.companyType" placeholder="请输入企业类型"></el-input>
                </el-form-item>
                <el-form-item label="选择地区：">
                    <template>
                        <el-select v-model="company.companyProvince"  style="width: 80px;"placeholder="请选择" @change="selectCity2">
                            <el-option
                                    v-for="(pro,index) in provinces"
                                    :key="index"
                                    :label="pro"
                                    :value="pro">
                            </el-option>
                        </el-select>

                        <el-select v-model="company.companyCity" style="margin-left: 20px;width: 80px;" placeholder="请选择市" @change="selectRegion2">
                            <el-option
                                    v-for="(city,index) in typeCitys"
                                    :key="index"
                                    :label="city"
                                    :value="city">
                            </el-option>
                        </el-select>

                        <el-select v-model="company.companyArea" style="margin-left: 20px;width: 80px;" placeholder="请选择市">
                            <el-option
                                    v-for="(region,index) in typeRegions"
                                    :key="index"
                                    :label="region"
                                    :value="region">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>

                <el-form-item label="公司地址" prop="companyAddress">
                    <el-input type="text" v-model="company.companyAddress" placeholder="请输入公司地址"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="fixedTel">
                    <el-input type="text" v-model="company.fixedTel" placeholder="请输入联系方式"></el-input>
                </el-form-item>
                <el-form-item label="企业邮箱" prop="companyEmail">
                    <el-input type="text" v-model="company.companyEmail" placeholder="请输入企业邮箱"></el-input>
                </el-form-item>
                <el-form-item label="经营范围" prop="businessScope">
                    <el-input type="text" v-model="company.businessScope" placeholder="请输入经营范围"></el-input>
                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveCustomer()">确 定</el-button>
            </div>
        </el-dialog>


    </template>
</div>
</body>
<script>


    new Vue({
        el: "#app",
        data(){
            return{
                // 当前页数
                currentPage: 1,
                // 订单总数
                count : 0,
                // 每页的数据
                page_size : [6,3],
                // 当前每页的数据
                pageSize : 6,
                // 分页背景
                back: true,
                customers: [],
                company:{
                    id:0,
                    companyName:"",
                    legal:"",
                    companyType:"",
                    companyAddress:"",
                    fixedTel:"",
                    companyEmail:"",
                    companyProvince:"",
                    companyCity:"",
                    companyArea:"",
                    companyStatus:"未认证",
                    businessScope:""
                },
                dialogFormVisible: false,
                flag: 0,
                provinces:["湖北省","湖南省","广东省","河南省","河北省","陕西省","广西省"],//省
                citys:{
                    "湖北省":["武汉市","襄阳市","宜昌市","荆州市","恩施市"],
                    "湖南省":["长沙市","株洲市","湘潭市","衡阳市","邵阳市"],
                    "广东省":["广东市","深圳市","珠海市","中山市","佛山市"],
                    "河南省":["郑州市","开封市","洛阳市","南阳市","许昌市"],
                    "陕西省":["西安市","铜川市","宝鸡市","咸阳市","汉中市"],
                    "广西省":["南宁市","柳州市","桂林市","北海市","梧州市"]
                },//市
                regions:{
                    "武汉市":["洪山区","东湖区","青山区","江夏区","江汉区"],
                    "荆州市":["荆州区","沙市区"],
                    "长沙市":["长沙县","善华县","湘潭县","湘阴县"],
                    "襄阳市":["襄城区","樊城区","襄州区","保康县"],
                    "株洲市":["茶陵县","炎陵县","芦淞县"],
                    "广东市":["黄埔区","花都区","天河区"],
                    "郑州市":["中原区","二七区","上街区"],
                    "西安市":["莲湖区","雁塔区","未央区"],
                    "南宁市":["江南区","青秀区","兴宁区"]
                },//区
                typeCitys:[],//选择的省下的市
                typeRegions:[],//选择的市下的县
                value:{
                    pro:'',
                    city:'',
                    region:'',
                    name:''
                },
                pro:"",
                city:"",
                region:"",
                name:"",
                apply:"",
                radio:""

            }
        },
        methods:{
            search(){
                this.pro = this.value.pro;
                this.city = this.value.city;
                this.region = this.value.region;
                this.name = this.value.name;
                this.currentPage = 1;
                this.loadCustomers();
            },
            loadCustomers(){
                axios.get("/customers/like?current=" + this.currentPage + "&pageSize=" + this.pageSize + "&province="
                    + this.pro+"&city=" + this.city + "&region=" + this.region + "&name=" + this.name)
                    .then(res => {
                        this.customers = res.data.data;
                        this.count = res.data.count;
                    });
            },
            // 添加客户
            saveCustomer() {
                if(this.flag == 0){
                    axios.post("/customer", this.company)
                        .then(res => {
                            if(res.data == "ok"){
                                this.loadCustomers();
                            }
                        });
                }
                this.dialogFormVisible = false;
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadCustomers();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadCustomers();
            },
            closeDialog(){
                this.company = {companyStatus:"未认证"};
                this.dialogFormVisible = false;
                this.loadCustomers();
            },
            // // 删除客户
            // handleDelete(index, row) {
            //     if(this.customers.length == 1){
            //         this.currentPage = this.currentPage - 1;
            //     }
            //     axios.delete("/customer/" + row.id)
            //         .then(res => {
            //             if(res.data == "ok"){
            //                 this.loadCustomers();
            //             }
            //         });
            // },
            findCompany(){
                location.href="findCompany.html";
            },

            //二级菜单
            selectCity(){
                this.value.city='';
                for( const k in this.provinces){
                    if(this.value.pro===this.provinces[k]){
                        this.typeCitys=this.citys[this.value.pro]
                    }
                }
            },
            //三级菜单
            selectRegion(){
                this.value.region='';
                for(const k in this.typeCitys){
                    if(this.value.city===this.typeCitys[k]){
                        this.typeRegions=this.regions[this.value.city];
                    }
                }
            },
            //二级菜单
            selectCity2(){
                this.company.companyCity='';
                for( const k in this.provinces){
                    if(this.company.companyProvince===this.provinces[k]){
                        this.typeCitys=this.citys[this.company.companyProvince]
                    }
                }
            },
            //三级菜单
            selectRegion2(){
                this.company.companyArea='';
                for(const k in this.typeCitys){
                    if(this.company.companyCity===this.typeCitys[k]){
                        this.typeRegions=this.regions[this.company.companyCity];
                    }
                }
            },

        },
        mounted(){
            this.loadCustomers();

        }
    });
</script>
</html>